﻿$(function() {
	/**
	 * 电度电费
	 * */
	var monthpie = echarts.init(document.getElementById('monthpie'));
	optionpie = {
		    tooltip: {
		        trigger: 'item',
		        formatter: "{a} <br/>{b}: {c} ({d}%)"
		    },
		    backgroundColor:'#e0e0e0',
		    legend: {
		        orient: 'vertical',
		        x: 'right',
		        data:[],
		    },
		    series: [{
	            name:'电费',
	            type:'pie',
	            radius: [0, '40%'],
	            label: {
	                normal: {
	                    position: 'inside'
	                }
	            },
	            labelLine: {
	                normal: {
	                    show: false
	                }
	            },
	            data:[]
	        },{
	            name:'电度',
	            type:'pie',
	            radius: ['55%', '80%'],
	            data:[]
	        }]
		};
	monthpie.setOption(optionpie);
	
	/**
	 * 电度趋势
	 * */
    var monthbar1 = echarts.init(document.getElementById('monthbar1'));
    optionbar1 = {
    	    tooltip : {
    	        trigger: 'axis',
    	        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
    	            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
    	        }
    	    },
    	    legend: {
    	    	bottom: '20',
    	        data:[],
    	    },
    	    grid: {
	            top: '10%',
	            left: '4%',
	            right: '4%',
	            bottom:'20%',
	            containLabel: true
	        },
    	    backgroundColor:'#e0e0e0',
    	    xAxis : [{
    	            type : 'category',
    	            data :[],
		    	    splitLine:{
		            	show:false
		            }
    	        }],
    	    yAxis :[{
    	    	type: 'value',
		    	name:'电度(度)',
		    	axisLabel:{
		    		 formatter: '{value}'
		    	},
		    	splitLine:{
	            	show:false
		        }
    	    },{
    	    	type: 'value',
		    	name:'电费(元)',
		    	axisLabel:{
		    		formatter: '{value}'
		    	},
		    	splitLine:{
	            	show:false
		        }
    	    }],
    	    series :[]
    	};
    monthbar1.setOption(optionbar1);
    
    /**
     * 月度同比
     * */
    
    var monthbar2 = echarts.init(document.getElementById('monthbar2'));
	optionBar2 = {
		    tooltip: {
		        trigger: 'axis',
		        axisPointer: {
		            type: 'shadow'
		        }
		    },
		    backgroundColor:'#e0e0e0',
		    grid: {
	            top: '10%',
	            left: '4%',
	            right: '6%',
	            bottom:'20%',
	            containLabel: true
	        },
		    xAxis: {
		        type: 'value',
		        boundaryGap: [0, 0.01],
		        name : '度',
		        nameLocation:'end',
			        axisLabel : {
	                formatter: '{value}'
	            },
	            splitLine:{
	            	show:false
	            }
		    },
		    yAxis: {
		        type: 'category',
		        name : '月度同比',
		        data:['2016年8月'],
		        splitLine:{
	            	show:false
	            }
		    },
		    series: [
		        {
		            name: '月度同比',
		            type: 'bar',
		            barMaxWidth:40,
		            label: {
		                normal: {
		                    show: true,
		                    formatter: '{c}度',
		                    position: 'right'
		                }
		            },
		            data: [500]
		        }
		    ]
		};
	monthbar2.setOption(optionBar2);
	
	//下拉框选项
    $('#cc').combobox({
    	width:'100px',
    	panelHeight:100,
    	valueField: 'value',
		textField: 'label',
		data: [{
			label:'选择月份',
			value:'0'
		},{
			label: '1月',
			value: '1'
		},{
			label: '2月',
			value: '2'
		},{
			label: '3月',
			value: '3'
		},{
			label: '4月',
			value: '4'
		},{
			label: '5月',
			value: '5'
		},{
			label: '6月',
			value: '6'
		},{
			label: '7月',
			value: '7'
		},{
			label: '8月',
			value: '8'
		},{
			label: '9月',
			value: '9'
		},{
			label: '10月',
			value: '10'
		},{
			label: '11月',
			value: '11'
		},{
			label: '12月',
			value: '12'
		}] ,
		onChange:function(value){
			getSameMonthData();
		}
    });
    
    var lineId=0;var equId=0;
    var	startMonth=1;
    var	endMonth=1;
    var year=moment().year();
    
    /**
     * slider滑动事件
     * */
    $('#ss').slider({
    	range: true,
    	max:12,
		tipFormatter: function(value){    
        	return "第"+value+"月";
        },
        onComplete:function(value){//滑块值改变时触发
	       	startMonth=value[0];
	       	endMonth=value[1];
	       	getData();
       }
    });
    
    /**
     * 初始化
     * */
    var vm = new Vue({
	    el: '#itemData',
	    data:{item:[]}
	}); 

    var weeks=[1,moment().month()+1];
    $('#ss').slider('setValues',weeks);
    var arr=$('#ss').slider('getValues');
    startMonth=arr[0];
    endMonth=arr[1];
    getData();
    
  
    function getData(){
    	$("#cc").combobox('setValue', startMonth);
    	$.post(basePath+"/line/lineElectricity/month.json",{"lineId":lineId,year:year,startTime:startMonth,endTime:endMonth},function(res){
    		vm.$set('item',res);
    		if(res.success){
    			monthpie.setOption({
    				legend:{
    					data:res.legType
    				},
			        series: [{
			        	name:'电费',
			            data: res.chargePie
			        },{
			        	name:"电度",
			            data: res.electricityPie
			        }]
    			});
    			var series1=[];
    			series1.push({
    				name:res.chargeBar[0].name,
    	            type:'bar',
    	            stack: '电度',
    	            barMaxWidth:40,
    	            data:res.chargeBar[0].value
		        });
    		    for(var i = 1;i<res.chargeBar.length;i++){
    		        series1.push({
    		            name: res.chargeBar[i].name,
    		            stack: '电费',
    		            yAxisIndex: 1,
    		            type: 'bar',
    		            barMaxWidth:40,
    		            data: res.chargeBar[i].value
    		        });
    		    }
    		    monthbar1.setOption({
    				legend:{
    					data:res.barLegend
    				},
    				xAxis : [{
        	            data : res.months
        	        }],
        	        series:series1
    			});
    		}else{
    			alert("无数据，请重新选择时间区间");
    		}
    	});
    }
    function getSameMonthData(){
    	var month=$("#cc").combobox('getValue');
    	$.post(basePath+"/line/lineBySameMonth/electricityMonth.json",{"equId":equId,"month":month},function(res){
    		monthbar2.setOption({
	   			 yAxis: {
				        data:res.dateLegend 
				    },
			    series: [{
		            data: res.YOYElecricity
			    }]
    		});
    	});
    }
    
	 //点击事件
	 $("#defineTime").click(function (){
		 var mePanel = $('#defineTimeWin');
	   	 mePanel.dialog('open');
	 });
	//定义时间的表单
	$('#defineTimeWin').dialog({
		title:'自定义时间',
		width:400,
		height:150,
		iconCls:'icon-add',
		closed: true,
		modal: true,
		inline:true,
		buttons:[{
			text:'确定',
			iconCls:'icon-add-new',
			handler:function(){
					var st=$("input[name='startTime']").val();
					year=st;
					getData();
					$('#defineTimeWin').dialog('close');

			}
		},{
			text:'取消',
			iconCls:'icon-redo',
			handler:function(){
				$('#defineTimeWin').dialog('close');
			}
		}],
		onClose: function() {
			$('#defineTimeform').form('reset');
		}
	});
	 /**
	  * 切换设备的点击事件
	  * */
	var mePanel = $('#switchEquip');
	$("#linetree").tree({
		onDblClick: function(node) {
			if (node.url) {
				if(node.shifts){
					lineId=node.id;
					var arr=$('#ss').slider('getValues');
				    startMonth=arr[0];
				    endMonth=arr[1];
				    getData();
				    mePanel.dialog('close');
				}else{
					$.messager.alert({showSpeed:100,title:'消息提示',msg:'该生产线无班次，请重新选择',timeout:3000});
				}
			}else{
				$.messager.alert({showSpeed:100,title:'消息提示',msg:'请选择生产线！',timeout:3000});
			}
		}
	});
  $("#switchEquipOK").click(function(){
  	var row = $("#linetree").tree('getSelected');
  	if(row.url){
		lineId=row.id;
		var arr=$('#ss').slider('getValues');
		startMonth=arr[0];
		endMonth=arr[1];
		getData();
		$('#switchEquip').dialog('close');
  	}else{
   		$.messager.alert({showSpeed:100,title:'消息提示',msg:'请选择一条生产线!',timeout:3000});
   	}
  });
});